<?php
require('header.php');
require('paginator.class.php');
requireAuth();

$facebook = new Facebook($fbconfig);
$fbUserId = $facebook->getUser();
$page = isset($_GET['page']) ? intval($_GET['page']) : 1;
?>
		<script>
		$(function() {
		$( ".datepicker" ).datepicker();
		});
		$(document).ready(function(){
			$('#btn-save').click(function(){
				$('.modal-body').html('');
				var url = $('#url').val(), msg = $('#message').val(), groups = $('#groups').val();
				var picture = $('#picture').val(), caption = $('#caption').val(), desc = $('#desc').val(), name = $('#name').val();
				var btn = $(this);
				if(groups == null){
					$('#groups').focus();
					return false;
				}
				if(url == '' && msg == ''){
					$('#url').focus();
					return false;
				}
				btn.button('loading');
				$('.modal-body').html('<img src="/images/loading.gif" /> Sending to Facebook');
				//$('#btn-save').html('Submitting...');
				$.ajax({
					url: '<?php echo route('group-publish') ?>',
					dataType: 'json',
					type: 'POST',
					data: {url:url,msg:msg,groups:groups,picture:picture,caption:caption,desc:desc,name:name},
					success: function(rs){
						if(typeof rs != 'undefined' && rs.length > 0){
							var fbdata = '<p class="text-success">Posts submitted, click on IDs below to view on Facebook.</p>';
							for(i = 0; i < rs.length; i++){
								if(rs[i] != null){
									fbdata += '<p><a href="http://facebook.com/'+rs[i]+'" target="_blank">'+rs[i]+'</a></p>';
								}
								else{
									fbdata += '<p>FAILED</p>';
								}
							}
							$('.modal-body').html(fbdata);
						}
						else{
							$('.modal-body').html('Error when posting data.');
						}
						btn.button('reset');
					},
					error: function(xhr, status, err){
						btn.button('reset');
						alert("Error when posting data\n" + xhr.responseText);
					}
				});

			});
			$('.page-reload').click(function(){
				location.href=location.href;
			});
			$('#schedule_tip').click(function(){
				$('#schedule_div').toggle();
			})
		});
		</script>
			<div class="row">
				<?php include('includes/listgrouppost.php') ?>
				<div class="col-md-5">
					<div class="well">
						<div class="panel panel-default">
						  <!-- Default panel contents -->
						  <div class="panel-heading"><h4>Add schedule post</h4></div>
						  <!-- Table -->
						  <div class="container-fluid" style="margin:10px 0;">
							  <form class="form-horizontal" role="form">
							  	<div class="form-group">
								    <label for="groups" class="col-sm-4 control-label">Select groups</label>
								    <div class="col-sm-8">
								      <select name="groups" class="form-control" id="groups" multiple style="max-width: 400px;">
								      	<?php
								      	echo getOptGroup();
								      	?>
								      </select>
								    </div>
								</div>
								<hr />
								<div class="form-group">
									<div style="margin:0 15px">
										<div class="alert alert-info">
											<span class="glyphicon glyphicon-info-sign"> </span> You do not need to fill all fields below. Require either <strong>Link</strong> or <strong>Message</strong>.
										</div>
									</div>
								</div>
							  	<div class="form-group">
								    <label for="url" class="col-sm-4 control-label">Link</label>
								    <div class="col-sm-8">
								      <input type="text" name="url" class="form-control" id="url" value="">
								    </div>
								</div>
							  	<div class="form-group">
								    <label for="message" class="col-sm-4 control-label">Message</label>
								    <div class="col-sm-8">
								      <textarea class="form-control" name="message" id="message" rows="2"></textarea>
								    </div>
								</div>
							  	<div class="form-group">
								    <label for="picture" class="col-sm-4 control-label">Picture</label>
								    <div class="col-sm-8">
								      <input type="text" name="picture" class="form-control" id="picture" value="">
								    </div>
								</div>
							  	<div class="form-group">
								    <label for="name" class="col-sm-4 control-label">Name</label>
								    <div class="col-sm-8">
								      <input type="text" name="name" class="form-control" id="name" value="">
								    </div>
								</div>
							  	<div class="form-group">
								    <label for="caption" class="col-sm-4 control-label">Caption</label>
								    <div class="col-sm-8">
								      <input type="text" name="caption" class="form-control" id="caption" value="">
								    </div>
								</div>
							  	<div class="form-group">
								    <label for="desc" class="col-sm-4 control-label">Description</label>
								    <div class="col-sm-8">
								      <textarea class="form-control" name="desc" id="desc" rows="2"></textarea>
								    </div>
								</div>
								  <div class="form-group">
								    <div class="col-sm-offset-4 col-sm-8">
								      <button type="button" data-backdrop="static" data-keyboard="false" id="btn-save" class="btn btn-primary" data-toggle="modal" data-target="#myModal"><span class="glyphicon glyphicon-open"></span> Submit</button>
								    </div>
								  </div>

							  </form>
							  
							</div>
						</div>
					</div>
				</div>

				<div class="modal fade" id="myModal">
				  <div class="modal-dialog">
				    <div class="modal-content">
				      <div class="modal-header">
				        <button type="button" class="close page-reload" data-dismiss="modal" aria-hidden="true">&times;</button>
				        <h4 class="modal-title">Result</h4>
				      </div>
				      <div class="modal-body">
				        
				      </div>
				      <div class="modal-footer">
				        <button type="button" class="btn btn-default page-reload" data-dismiss="modal">Close</button>
				      </div>
				    </div><!-- /.modal-content -->
				  </div><!-- /.modal-dialog -->
				</div><!-- /.modal -->

			</div>
<?php require('footer.php'); ?>